<script lang="ts" setup>
import { getMessage, type MessageProps } from '../../apis/profile';
import { useTable } from './useTable';
import { typeList, dateList } from './constants';

let pageNum = $ref(1);
let PAGE_SIZE = 15;

const requestParams = reactive<MessageProps>({
  duration: 0,
  type: '',
  limit: PAGE_SIZE
});

const { data, run, loading, error } = useRequest(getMessage, {
  defaultParams: [{ ...requestParams, offset: pageNum - 1 }],
});

const { columns } = useTable();

/** 翻页点击 */
const handleCurrentChange = (data) => {
  pageNum = data;
  run({ ...requestParams, offset: pageNum - 1 });
};

const sortChange = (data) => {
  requestParams.sortRule = data.order ? data.field + ':' + data.order : '';
};

watch(
  () => requestParams,
  (val) => {
    pageNum = 1;
    run({ ...val, offset: pageNum - 1 });
  },
  {
    deep: true
  }
);

const onDateSubmit = (data) => {
  requestParams.duration = data;
};

const onTypeSubmit = (data) => {
  requestParams.type = data;
};
</script>

<template>
  <div class="p-20px">
    <div class="flex justify-between align-center">
      <div class="flex justify-start mb-10px">
        <vc-single-select :required="false" class="mr-20px" title="消息类型" :options="typeList" :hasAll="false" hideSearch
          @submit="onTypeSubmit" />
        <vc-single-select :required="false" class="mr-20px" title="时间区间" :options="dateList"  :hasAll="false" hideSearch
          @submit="onDateSubmit" />
      </div>
      <span class="text-[rgba(0, 0, 0, 0.85)] text-12px">
        共计 <span style="color: #FF5959;">{{data?.total || 0}}</span> 条
      </span>
    </div>
    <vc-empty-fail @click="run({...requestParams, offset: pageNum - 1})" v-if="error" />
    <div class="container" v-else>
      <vc-table
        :loading="loading"
        :tableData="data?.items"
        :columns="columns"
        :total="data?.total"
        :pageSize="PAGE_SIZE"
        v-model:pageNum="pageNum"
        @page-change="handleCurrentChange"
        @sort-change="sortChange"
      />
    </div>
  </div>

</template>
